<script setup lang="ts">

defineProps<{
  data: {
    x: number,
    y: number,
    fx: boolean,
    fy: boolean
  }
}>()

</script>

<template>
  <div class="rotate">
    <div class="bar" :style="{ transform: `rotate(${data.x}deg)` }" :class="{flip: data.fx}">{{ data.x.toFixed(1) }}</div>
    <div class="bar" :style="{ transform: `rotate(${data.y}deg)` }" :class="{flip: data.fy}">{{ data.y.toFixed(1) }}</div>
  </div>
</template>

<style scoped lang="less">
.rotate {
  width: 40vh;
  height: 20vh;
  position: absolute;
  top: 4rem;
  left: 10rem;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  border-bottom: 1px solid #111;
  color: #0F0;

  .bar {
    width: 0.5rem;
    height: 5rem;
    background-color: #333;
    transform-origin: 50% 100%;
    &.filp {
      color: #F00
    }
  }
}
</style>
